import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Tag, Label } from 'iftide';

export default class Basic extends Component {
    constructor(props){
        super(props)
    }

    clickEvent(){
        alert('选中了')
    }

    deleteEvent(){
        alert('删除了')
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.label}>
                    <Label text = '分类标签 - 禁用态' fontWeight={'bold'} textDecorationLine={'underline'}/>
                </View>
                <View style={styles.content}>
                    <Tag text={'禁用'} size={'small'} disabled={true} type={'linear'}/>
                    <Tag text={'禁用'} size={'normal'} disabled={true} type={'linear'}/>
                    <Tag text={'禁用'} size={'small'} disabled={true} type={'linear'} hasRadius={true}/>
                    <Tag text={'禁用'} size={'normal'} disabled={true} type={'linear'} hasRadius={true}/>
                </View>
                <View style={styles.label}>
                    <Label text = '分类标签 - 未选中态' fontWeight={'bold'} textDecorationLine={'underline'}/>
                </View>
                <View style={styles.content}>
                    <Tag text={'未选中'} size={'small'} type={'linear'} isSelected={false} eventClick={this.clickEvent}/>
                    <Tag text={'未选中'} size={'normal'} type={'linear'} isSelected={false}/>
                    <Tag text={'未选中'} size={'small'} type={'linear'} hasRadius={true} isSelected={false}/>
                    <Tag text={'未选中'} size={'normal'} type={'linear'} hasRadius={true} isSelected={false}/>
                </View>
                <View style={styles.label}>
                    <Label text = '分类标签 - 选中态（描边）' fontWeight={'bold'} textDecorationLine={'underline'}/>
                </View>
                <View style={styles.content}>
                    <Tag text={'选中'} size={'small'} type={'linear'} isSelected={true}/>
                    <Tag text={'选中'} size={'normal'} type={'linear'} isSelected={true}/>
                    <Tag text={'选中'} size={'small'} type={'linear'} hasRadius={true} isSelected={true}/>
                    <Tag text={'选中'} size={'normal'} type={'linear'} hasRadius={true} isSelected={true}/>
                </View>
                <View style={styles.content}>
                    <Tag text={'选中'} size={'small'} type={'linear'} isSelected={true} hasDeleteBtn={true} deleteEvent={this.deleteEvent}/>
                    <Tag text={'选中'} size={'normal'} type={'linear'} isSelected={true} hasDeleteBtn={true}/>
                    <Tag text={'选中'} size={'small'} type={'linear'} hasRadius={true} isSelected={true} hasDeleteBtn={true}/>
                    <Tag text={'选中'} size={'normal'} type={'linear'} hasRadius={true} isSelected={true} hasDeleteBtn={true}/>
                </View>
                <View style={styles.label}>
                    <Label text = '分类标签 - 选中态（实心）' fontWeight={'bold'} textDecorationLine={'underline'}/>
                </View>
                <View style={styles.content}>
                    <Tag text={'选中'} size={'small'} isSelected={true}/>
                    <Tag text={'选中'} size={'normal'} isSelected={true}/>
                    <Tag text={'选中'} size={'small'} hasRadius={true} isSelected={true}/>
                    <Tag text={'选中'} size={'normal'} hasRadius={true} isSelected={true}/>
                </View>
                <View style={styles.content}>
                    <Tag text={'选中'} size={'small'} isSelected={true} hasDeleteBtn={true}/>
                    <Tag text={'选中'} size={'normal'} isSelected={true} hasDeleteBtn={true}/>
                    <Tag text={'选中'} size={'small'} hasRadius={true} isSelected={true} hasDeleteBtn={true}/>
                    <Tag text={'选中'} size={'normal'} hasRadius={true} isSelected={true} hasDeleteBtn={true}/>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container:{
        height: '100%',
        flex:1
    },
    label: {
        padding: 13,
        backgroundColor: '#F5F7F9',
    },
    content:{
        flexDirection:'row',
        justifyContent: 'space-around',
        margin: 13,
    }

});

